<template>
  <div>
     <headNav title="错题本"></headNav>
     <div class="headDivCss" >
       <div class="headBranchDivCss" @click="wrongTopicTypeClick(0)" :class="{borderBottom: wrongTopicType == 0 }"  >
          <span>测试错题</span>
       </div>
       <div class="headBranchDivCss" @click="wrongTopicTypeClick(1)" :class="{borderBottom: wrongTopicType == 1 }" >
          <span>练习错题</span>
       </div>
     </div>
     <div v-if="statisticsData" >
       <div class="middleDivCss" style="height: 2.96rem; display: flex; position: relative; " >
         <div id="main" style="width: 50%; height: 100%;  " >
          <!-- 环形图模块 -->
         </div>
         <div style="display: flex; align-items: center; flex-direction: column; position: absolute; top: 1.1rem; left: 1.3rem;  " >
           <span>错题总数</span>
           <span style="font-size: 0.32rem; font-weight: 550;"  @click="bbb" >{{statisticsData.totalNum}}</span>
         </div>
         <div class="roundTakeTextCSS" >
          <div style="margin: .1rem 0;" v-for="(val, index) in statisticsData.errQuestionDtos" :key="index" >

            <span style="color: #128fef;" v-if="val.questionType == 1" >● 单选题 ({{parseFloat((val.scale * 100).toFixed(2))}}%) <span style="color: #000; margin-left: 5px;" >{{val.count}}题</span></span>
            <span style="color: #ff0000;" v-if="val.questionType == 2" >● 多选题 ({{parseFloat((val.scale * 100).toFixed(2))}}%) <span style="color: #000; margin-left: 5px;" >{{val.count}}题</span></span>
            <span style="color: #40d3b3;" v-if="val.questionType == 3" >● 判断题 ({{parseFloat((val.scale * 100).toFixed(2))}}%) <span style="color: #000; margin-left: 5px;" >{{val.count}}题</span></span>
          </div>
         </div>
       </div>
       <div style="margin-top: 0.2rem; " >
         <div class="subjectDivCss" >
          <div class="subjectSmallDivCss" :class="{borderBottom: selectSubject.subjectId == val.subjectId}"
          v-for="(val, index) in statisticsData.errAnswerDetailDtos " :key="index" @click="subjectOptionsClick(val)" >
            {{val.subjectName}}
            ({{val.count}})
          </div>
         </div>
         <div>
           <div class="subjectSummaryCss" @click="detailedQuestionsClick" >
              <span>{{selectSubject.subjectName}}全部错题</span>
              <span>共{{selectSubject.count}}题&emsp;></span>
           </div>
           <div class="knowledgePointsCss" @click="clickType(val)"
           v-for="(val, index) in this.selectSubject.errKnowledgeDetailDtos" :key="index" >
              <span>{{val.knowledgeOrChapterName}}</span>
              <span>共{{val.count}}题&emsp;></span>
           </div>
         </div>
        </div>
     </div>
     <div v-if="!statisticsData" class="flex" style="justify-content: center;" >
       <img src="@/assets/img/wuti.png" style="width: 4.2rem; height: 4.62rem; margin-top: 2rem; " >
     </div>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { Tab, TabItem, Checklist  } from 'vux'
import echarts from 'echarts'
export default {
  components: {
    headNav,
    Tab,
    TabItem,
    Checklist
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      keyPointsData: state => state.wrongTopic.keyPointsData,
      wrongTopicTypeData: state => state.wrongTopic.wrongTopicTypeData
    })
  },
  data () {
    return {
      wrongTopicType: 0,  // 测试错题 && 练习错题 选择
      statisticsData: '', // 所有的错题统计
      selectSubject: '',  // 用户选择的学科
      allSubject: [
        {id: 1, subjectName: '语文', count:29},
        {id: 2, subjectName: '数学', count:28},
        {id: 3, subjectName: '英语', count:24},
        {id: 4, subjectName: '物理', count:11},
        {id: 5, subjectName: '历史', count:11},
        {id: 6, subjectName: '化学', count:11}
      ],
      option: {
        color: ['#ffb176']
      },
      charts: '',
      opinion:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
      opinionData:[
        {value:2, name:''},
        {value:0.5, name:''},
        {value:7.5, name:''}
      ]
    }
  },
  mounted() {
    this.controlWrongTopicTypeData(0)
    this.encapsulation(this.wrongTopicType)
  },
  watch: {
    statisticsData (newName, oldName) {
      if (newName) {
        newName.errAnswerDetailDtos.length > 0 ? this.selectSubject = newName.errAnswerDetailDtos[0] : this.selectSubject = ''
        this.controlSelectSubject(this.selectSubject)
        for(let i = 0; i < newName.errQuestionDtos.length; i++) {
          if (newName.errQuestionDtos[i].questionType == 1 ) {
            // this.$set(this.opinionData[0].value,  newName.errQuestionDtos[i].scale)
            this.opinionData[0].value = newName.errQuestionDtos[i].scale
          }
          if (newName.errQuestionDtos[i].questionType == 2 ) {
            // this.$set(this.opinionData[1].value,  newName.errQuestionDtos[i].scale)
            this.opinionData[1].value = newName.errQuestionDtos[i].scale
          }
          if (newName.errQuestionDtos[i].questionType == 3 ) {
            // this.$set(this.opinionData[2].value,  newName.errQuestionDtos[i].scale)
            this.opinionData[2].value = newName.errQuestionDtos[i].scale
          }
        }
        this.$nextTick(() => {
           this.drawPie('main')
        })
      }
    }
  },
  methods: {
    ...mapActions({
       statisticsApi: 'wrongTopic/statisticsApi'
     }),
     ...mapMutations({
       controlKeyPointsData: 'wrongTopic/controlKeyPointsData',
       controlWrongTopicTypeData: 'wrongTopic/controlWrongTopicTypeData',
       controlSelectSubject: 'wrongTopic/controlSelectSubject'
     }),
     // 错题学科切换
    subjectOptionsClick (e) {
      this.selectSubject = e
      this.controlSelectSubject(e)
    },
    // 点击知识点跳转单题详情
    detailedQuestionsClick () {
      this.controlKeyPointsData(this.selectSubject)
      this.$router.push('/wrongTopic/questionDetails')
    },
    clickType (e) {
      this.controlKeyPointsData(e)
      this.$router.push('/wrongTopic/questionDetails')
    },
    // 测试错题 && 联系错题 切换触发事件
    wrongTopicTypeClick (e) {
      this.wrongTopicType = e
      this.controlWrongTopicTypeData(this.wrongTopicType)
      this.encapsulation(this.wrongTopicType)
    },
    async bbb () {
      console.log(this.studentId)
      // let params = {
      //   ErrOrIntensive: 0,
      //   StudentId : this.studentId
      // }
      // try{
      //   let val = await this.statisticsApi(params)
      //   console.log('-----------------------------')
      //   console.log(val)
      // }catch(e){
      //   console.log('-------异常了----------')
      //   console.log(e)
      // }

      this.opinionData = [
        {value:30, name:''},
        {value:30, name:''},
        {value:40, name:''}
      ]
      this.$nextTick(() => {
          this.drawPie('main')
      })
    },
    // 错题统计请求封装
    encapsulation (e) {
      let params = {
        ErrOrIntensive: e,
        StudentId : this.studentId
        // '2dd7fe356b594f73838655422382199f'
        // this.studentId
      }
      this.statisticsApi(params).then(res => {
        this.statisticsData = res
        console.log(res)
      }).catch(err => {
        if (err == '暂无错题') {
          this.statisticsData = ''
        }
      })
    },
    // ————————————————————————————————————————————————
    drawPie(id){
       this.charts = echarts.init(document.getElementById(id))
       this.charts.setOption({
         tooltip: {
           trigger: 'item',
           formatter: '{a}<br/>{b}:{c} ({d}%)'
         },
         legend: {
           orient: 'vertical',
           x: 'left',
           data:this.opinion
         },
         series: [
           {
             name:'访问来源',
             type:'pie',
             radius:['50%','70%'],
             color: ['#128fef', '#ff0000', '#40d3b3'],
             avoidLabelOverlap: false,
             label: {
               normal: {
                 show: false,
                 position: 'center'
               },
               emphasis: {
                 show: true,
                 textStyle: {
                   fontSize: '30',
                   fontWeight: 'blod'
                 }
               }
             },
             labelLine: {
               normal: {
                 show: false
               }
             },
             data:this.opinionData
           }
         ]
       })
    }
  }
  // ————————————————————————————————————————————————
}
</script>

<style scoped lang="less" >

.wrapper{
  width: 7rem;
  height: 5rem;
}
.middleDivCss {
  width: 7.2rem;
  height: 6.57rem;
  background: #FFF;
}

.subjectSummaryCss {
  width: 6.8rem;
  height: 1rem;
  padding: 0 .2rem 0 .2rem;
  font-size: 0.28rem;
  color: #FFF;
  background: #c2e0f7;
  .flex;
}

.knowledgePointsCss {
  width: 6.8rem;
  height: 1rem;
  padding: 0 .2rem 0 .2rem;
  font-size: 0.28rem;
  background: #ffffff;
  .flex;
}

// 上下居中，左右靠边
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

// 左右居中，排序从上到下
.flexIn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.roundTakeTextCSS {
  width: 50%;
  height: 100%;
  font-size: 0.26rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.headDivCss {
  width: 7.2rem;
  height: 0.92rem;
  background: #FFF;
  display: flex;
}


.headBranchDivCss {
  width: 50%;
  height: 95%;
  font-size: 0.32rem;
  font-weight:550;
  border-bottom: 1px solid #f1f1f1;
  .flexIn;
}

.borderBottom {
  border-bottom: 3px solid #128fef;
  color: #128fef!important;
}

.subjectDivCss {
  width: 6.9rem;
  height: .8rem;
  padding-left: .3rem;
  background: #FFF;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
}

.subjectSmallDivCss {
  width: 2rem;
  height: 95%;
  color: #999;
  font-size: .3rem;
  margin-right: .3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>
